<template>
  <!-- <transition name="fade"> -->
  <div :class="getTipContainerCss" v-if="isOpen">
    <div class="tip-content" :style="{ top: getViewTop, left: getViewLeft }">
      <div class="tip-info" ref="textRef">
        <div class="text">
          {{ tip }}
        </div>
      </div>
      <img
        class="arrowImg"
        :style="getArrowMargin"
        src="../../assets/img/ic_tip_arrow_down.png"
      />
    </div>
  </div>
  <!-- </transition> -->
</template>
<script>
import {
  refreshWebView,
  modifyTitleBar,
  setChangeTitleStyle,
  overrideTitleBarRightBtn,
  setgoSettingListener,
  setMessageVisible,
  getStatusBarHeight,
  setStatuBarHeightListener,
  sendProperty,
  setPropertiesListener,
  setNavigationVisible,
  getDevCacheAll,
  getProperty,
  toast,
  debugLog,
  userLog,
  getDarkMode,
  finishDeviceActivity,
  deleteDevice,
  modifyDeviceName,
  modifyDeviceNameById,
  modifyRoomName,
  getDeviceInfo,
  setDeviceInfoListener,
  setDeleteDeviceCallBack,
  setModifyDeviceNameCallBack,
  setModifyDeviceNameByIdCallBack,
  setModifyRoomCallBack,
  setSendPropertyListener,
  setRequestPropertyListener,
  setOnResumeListener,
  createRule,
  setCreateRuleListener,
  deleteRule,
  setDeleteRuleListener,
  getRules,
  setGetRuleListener,
  controlRuleActive,
  setControlRuleActiveListener,
  jumpToSetting,
  setJumpToSettingListener,
  getSwitchProperties,
  setRequestSwitchPropertiesListener,
  getControlProperties,
  setRequestControlPropertiesListener,
  getStatusProperties,
  setRequestStatusPropertiesListener,
  getGearProperties,
  setRequestGearPropertiesListener,
  getWarnEventProperties,
  setRequestWarnEventPropertiesListener,
  getFaultEventProperties,
  setRequestFaultEventPropertiesListener,
  isScreenSpreaded,
  saveStorageSync,
  setSaveStorageSyncListener,
  getStorageSync,
  setGetStorageSyncListener,
  removeStorageSync,
  setRemoveStorageSyncListener,
} from "../../assets/js/device";
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../assets/js/flexible.js";
export default {
  props: {
    posTopPro: {
      type: Number,
      default: 100,
    },
    posLeftPro: {
      type: Number,
      default: 0,
    },
    tipType: {
      type: Number,
      default: 0,
    },
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    isOnPro: {
      type: Boolean,
      default: false,
    },
    languagePro: {
      type: String,
      default: "zh",
    },
    closeTipPro: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tip: "",
      isOpen: false,
      position: 0,
      timer: null,
      deviceType: 1,
      language: "zh",
      posTop: 100,
      posLeft: 20,
      isOn: false,
      closeTip: false,
    };
  },

  created() {},
  mounted() {
    //屏幕的类型
    this.deviceType = screenType;

    this.language = this.languagePro;
    this.posTop = this.posTopPro;
    this.posLeft = this.posLeftPro;

    this.isOn = this.isOnPro;
    this.closeTip = this.closeTipPro;

    this.getTextHeight();
  },
  watch: {
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
    languagePro(newVal) {
      this.language = newVal;
    },
    posTopPro(newVal) {
      this.posTop = newVal;
    },
    posLeftPro(newVal) {
      this.posLeft = newVal;
    },
    isOnPro(newVal) {
      this.isOn = newVal;
    },
    closeTipPro(newVal) {
      if (newVal) {
        this.isOpen = false;
        this.clearShowTimer();
        this.closeTip = false;
      }
    },
  },

  computed: {
    //是否折叠屏
    getScreenSpreaded() {
      // return true; //测试用，要删除
      return isScreenSpreaded();
    },
    getArrowMargin() {
      console.log("Tip: getArrowMargin: marginLeft = ", this.getViewMargin);
      return {
        marginLeft: this.tipType === 0 ? this.getViewMargin : "0px",
        marginRight: this.tipType === 2 ? this.getViewMargin : "0px",
      };
    },
    getTipContainerCss() {
      // return "tipRight";
      console.log("Tip: getTipContainerCss: this.tipType = ", this.tipType);
      switch (this.tipType) {
        case 0:
          return "tipLeft";
        case 1:
          return "tipCenter";
        case 2:
          return "tipRight";
      }
    },
    getViewTop() {
      switch (this.deviceType) {
        case 1: //android手机
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
        case 2: //android Pad竖屏
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
        case 3: //android Pad横屏
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
        case 4: //android 折叠屏
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
        case 101: //iPhone
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
        case 102: //iPad
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
        default:
          return this.posTop - screenSize(62 - (this.isOn ? 0 : 10)) + "px";
      }
    },
    getViewLeft() {
      console.log("Tip: getViewLeft: tipType = ", this.tipType);
      switch (this.deviceType) {
        case 1: //android手机
          return screenSize(12 + 24) + "px";
        case 2: //android Pad竖屏
          return screenSize(24 + 24) + "px";
        case 3: //android Pad横屏
          return screenSize(12 + 24) + "px";
        case 4: //android 折叠屏
          return screenSize(12 + 24) + "px";
        case 101: //iPhone
          return screenSize(12 + 24) + "px";
        case 102: //iPad
          return screenSize(24 + 24) + "px";
        default:
          return screenSize(12 + 24) + "px";
      }
    },
    getViewMargin() {
      switch (this.deviceType) {
        case 1: //android手机
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(12 + 8 - 13 + 12) + "px";
          } else {
            return this.posLeft + screenSize(12 + 8 - 20 + 12) + "px";
          }
        case 2: //android Pad竖屏
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(24 + 8 - 37 + 12) + "px";
          } else {
            return this.posLeft + screenSize(24 + 8 - 45 + 12) + "px";
          }
        case 3: //android Pad横屏
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(12 + 8 - 13 + 12) + "px";
          } else {
            return this.posLeft + screenSize(12 + 8 - 20 + 12) + "px";
          }
        case 4: //android 折叠屏
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(12 + 8 - 13 + 12) + "px";
          } else {
            return this.posLeft + screenSize(12 + 8 - 20 + 12) + "px";
          }
        case 101: //iPhone
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(12 + 8 - 13 + 12) + "px";
          } else {
            return this.posLeft + screenSize(12 + 8 - 20 + 12) + "px";
          }
        case 102: //iPad
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(24 + 8 - 37 + 12) + "px";
          } else {
            return this.posLeft + screenSize(24 + 8 - 45 + 12) + "px";
          }
        default:
          if (this.language.indexOf("en") != -1) {
            return this.posLeft + screenSize(12 + 8 - 13 + 12) + "px";
          } else {
            return this.posLeft + screenSize(12 + 8 - 20 + 12) + "px";
          }
      }
    },
  },

  methods: {
    getTextHeight() {
      this.$refs.textRef;
      // console.log("Tip: height = ", this.$refs.textRef.style.height);
    },
    openTip(tip) {
      this.tip = tip;
      this.isOpen = true;
      this.timer = setTimeout(() => {
        this.isOpen = false;
        this.closeTip = false;
      }, 5000);
    },

    clearShowTimer() {
      if (this.timer !== undefined) {
        clearTimeout(timer);
      }
    },
  },
};
</script>
<style scoped>
.tipCenter {
  display: flex;
  justify-content: center;
}

.tipLeft {
  display: flex;
  justify-content: flex-start;
}

.tipRight {
  display: flex;
  justify-content: flex-end;
}

.tip-content {
  flex-direction: column;
  width: 243px;
  height: 66px;
  z-index: 9999;
  top: 100px;
  position: fixed;
  display: flex;
}

.tipLeft .arrowImg {
  /* margin-left: 42px; */
  align-self: flex-start;
  width: 24px;
  height: 6px;
}
.tipCenter .arrowImg {
  align-self: center;
  width: 24px;
  height: 6px;
}

.tipRight .arrowImg {
  /* margin-right: 42px; */
  align-self: flex-end;
  width: 24px;
  height: 6px;
}
.tip-info {
  width: 100%;
  height: 62px;
  background-color: #4d4d4d;
  border-radius: 16px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-info .text {
  color: #fff;
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-left: 16px;
  margin-right: 16px;
  line-height: 19px;
}

/* .fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
} */
</style>
